﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="ExportScanTemplates.aspx.cs" Inherits="ExportScanTemplates" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" Runat="Server">
    <div class="contentfull">
	<div class="breadcrumbs">
		<ul id="crumbs">
			<li>				<a title="My Account" href="/account/">My Account</a>  <img src="/images/separator.png" alt="&rarr;" class="separator"> 				Scans 			</li>
		</ul>
	</div>

		<div id="showMessages"></div>

<div class="fwrapper">
<div class="top">
<div class="innerleft">
	<h1 class="left">Scans</h1>
</div>
</div>

<div class="content">
	<form id="saveTemplate" method="post">
		<div class="tabs_box">
		<ul id="tabs">
			<li><a href="/account/scans/" class="tabs_off">All Scans</a></li>
			<li><a href="/account/scans/?type=realtime" class="tabs_off">Online Scans</a></li>				
			<li><a href="/account/scans/?type=offline" class="tabs_off">Offline Scans</a></li>
			<li><a href="/account/scans/?type=uploads" class="tabs_off">Scan Uploads</a></li>
			<li><a href="/account/scans/?type=delete" class="tabs_off">Bulk Scan Removal</a></li>
			<li><a href="/account/scans/?type=template" class="tabs_on"><img src="/images/new64.png" alt="New Feature" style="height:34px;width:34px;" />  Export templates</a></li>
		</ul>
		</div>
	<div class="wizard-nav">
	<input type="submit" value="Save template" class="black_button blarge next">
</div>
<h2 class="large">	Create your own template</h2>

<span class="lower_comment same">
<strong>What Are Templates?</strong><br/>
Templates let you export only necessary SSICA scan data in your own order of appearance. Start by drag-n-dropping items to the right column.<br/>
</span>


<fieldset>



<div id="NULL_wrapper00">
	<span style="float:right;">
<a id="a_delete_template" title="Delete template " href="/account/scans/?action=deleteTemplate&id=" class="deleteExportTemplate"><i>Delete this template</i></a> 
</span>
<script>
    $("#a_delete_template").click(function (event) {
        return confirm('You are about to delete the template. Are you sure?');
    });
</script>
	<p> <label for="templateName">Enter your template name (optional):</label> 	<input type="text" name="templateName" id="templateName" class="inputed"/> </p>
<input type="hidden" name="action" value="saveExportTemplate"/>
<input type="hidden" id="templateSequence" name="sequence" value=""/>
<h2 class="ui-state-disabled">Available columns:</h2>
<div id="NULL_list_wrapper">
<div id="NULL_wrapper11">
<ul id="staticOptions" class="droptrue">
	<li class="nodrag ui-state-disabled"><img src="/images/icons/static_default.png"/>Static choices</li>
	<li class="dragempty nodrag" style="display: block; ">Drag To Here</li>
 			<li class="columnsStatic" id="s1">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Scan ID</label>			</li> 			<li class="columnsStatic" id="s2">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Service ID</label>			</li> 			<li class="columnsStatic" id="s3">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Service Name</label>			</li> 			<li class="columnsStatic" id="s4">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Device ID</label>			</li> 			<li class="columnsStatic" id="s5">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Device Name</label>			</li> 			<li class="columnsStatic" id="s6">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">User ID</label>			</li> 			<li class="columnsStatic" id="s7">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">User Name</label>			</li> 			<li class="columnsStatic" id="s8">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Barcode</label>			</li> 			<li class="columnsStatic" id="s9">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Scan Status</label>			</li> 			<li class="columnsStatic" id="s10">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="" class="dragtext">Result</label>			</li> 			<li class="columnsStatic" id="s11">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="The time the scan took place." class="dragtext">Timestamp (Scanned)</label>			</li> 			<li class="columnsStatic" id="s12">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/static_default.png"/><label title="The time the scan was submitted or uploaded to your account." class="dragtext">Timestamp (Received)</label>			</li> </ul>
<ul id="propertiesOptions" class="droptrue">
<li class="nodrag ui-state-disabled"><img src="/images/icons/prop_default.png"/>Scan Properties</li>
<li class="dragempty nodrag" style="display: block; ">Drag To Here</li>
 			<li class="columnsProperties" id="p2">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/prop_default.png"/><label class="dragtext">Capture Type</label>			</li> 			<li class="columnsProperties" id="p20">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/prop_default.png"/><label class="dragtext">Mask matched</label>			</li> 			<li class="columnsProperties" id="p56">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/prop_default.png"/><label class="dragtext">Timezone</label>			</li> 			<li class="columnsProperties" id="p107">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/prop_default.png"/><label class="dragtext">GPS Location</label>			</li> 
</ul>
</div>
<div id="NULL_wrapper12">
<ul id="qaOptions" class="droptrue">
	<li class="nodrag ui-state-disabled">Answers to Questions</li>
	<li class="dragempty nodrag" style="display: block; ">Drag To Here</li>
 			<li class="columnsQuestions" id="q211135">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_gps.png"/><label class="dragtext">Your Location </label>			</li> 			<li class="columnsQuestions" id="q211136">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_radio.png"/><label class="dragtext">Status </label>			</li> 			<li class="columnsQuestions" id="q211137">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">Comments: </label>			</li> 			<li class="columnsQuestions" id="q211138">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">This person is not in the database. You may provide information here for review. </label>			</li> 			<li class="columnsQuestions" id="q211139">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_radio.png"/><label class="dragtext">Asset Status </label>			</li> 			<li class="columnsQuestions" id="q211140">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">This asset is not in the database. You may provide information here for review. </label>			</li> 			<li class="columnsQuestions" id="q211141">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_radio.png"/><label class="dragtext">Contact Method </label>			</li> 			<li class="columnsQuestions" id="q211142">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_check.png"/><label class="dragtext">Product Interests </label>			</li> 			<li class="columnsQuestions" id="q211143">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_radio.png"/><label class="dragtext">Interest Level </label>			</li> 			<li class="columnsQuestions" id="q211144">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_check.png"/><label class="dragtext">Items Checked </label>			</li> 			<li class="columnsQuestions" id="q211145">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">Order Quantity </label>			</li> 			<li class="columnsQuestions" id="q211146">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">This item is not in the database. You may provide information here for review. </label>			</li> 			<li class="columnsQuestions" id="q211147">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_letters.png"/><label class="dragtext">This ID is not in the database. You may provide information here for review. </label>			</li> 			<li class="columnsQuestions" id="q217544">
				<span class="draghandle mobile_disabled"></span>
				<span class="dragmove"></span>
				<span class="dragmoveup"></span>
				<span class="dragmovedown"></span>
				<img src="/images/icons/qu_radio.png"/><label class="dragtext">ths is test quwst </label>			</li> </ul>
</div>
<div id="NULL_wrapper13">
<ul id="templateList" class="droptrue">
	<li class="nodrag ui-state-disabled">Columns for the template</li>
	<li class="dragempty nodrag" style="display: block; ">Drag To Here</li>
</ul>
</div>
</div>
<br/>
<br/>
<br style="clear: both;" />
<input type="submit" value="Save template" class="black_button blarge next right" />

</div>
</fieldset>
</form>

<script>
    $(function () {
        function showempty() {
            $(".droptrue").each(function () {
                if ($(this).find("li:not(.nodrag)").length > 0) {
                    $(this).find(".dragempty").hide();
                } else {
                    $(this).find(".dragempty").fadeIn("slow");
                }
            });
        }
        showempty();

        $('.dragmovedown').click(function () {
            $(this).parent().insertAfter($(this).parent().siblings(':eq(' + $(this).parent().index() + ')'));
            $('#templateSequence').attr("value", $('#templateList').sortable("toArray"));
        });

        $('.dragmoveup').click(function () {
            $(this).parent().insertBefore($(this).parent().siblings(':eq(' + ($(this).parent().index() - 1) + ')'));
            $('#templateSequence').attr("value", $('#templateList').sortable("toArray"));
        });

        $('.dragmove').live('click', function (event) {
            var li = $(this).parent();
            var ul = $(li).parent();
            if (ul.attr('id').indexOf('templateList') != -1) {
                if (li.attr('class').indexOf('columnsStatic') != -1) {
                    $(this).parent().hide().appendTo('#staticOptions').show();
                } else if (li.attr('class').indexOf('columnsQuestions') != -1) {
                    $(this).parent().hide().appendTo('#qaOptions').show();
                } else if (li.attr('class').indexOf('columnsProperties') != -1) {
                    $(this).parent().hide().appendTo('#propertiesOptions').show();
                }
            } else {
                $(this).parent().hide().appendTo('#templateList').show();
            }
            $('#templateSequence').attr("value", $('#templateList').sortable("toArray"));
            showempty();
            return false;
        });

        $("#staticOptions, #qaOptions, #propertiesOptions, #templateList").sortable({
            start: function (e, ui) {
                var connectwith = ['#templateList'];
                if (ui.item.context.className == 'columnsStatic') {
                    connectwith.push('#staticOptions');
                } else if (ui.item.context.className == 'columnsProperties') {
                    connectwith.push('#propertiesOptions');
                } else if (ui.item.context.className == 'columnsQuestions') {
                    connectwith.push('#qaOptions');
                }
                $(this).sortable('option', 'connectWith', connectwith);
                $(this).sortable('refresh');
            },
            stop: function (event, ui) {
                showempty();
                $('#templateSequence').attr("value", $('#templateList').sortable("toArray"));
            },
            placeholder: 'dragplaceholder',
            cursor: "move",
            items: "> li:not(.nodrag)",
            change: function (e, ui) {
                showempty();
            },
            deactivate: function (e, ui) {
                showempty();
            },
            revert: 250,
            tolerance: "pointer",
            forcePlaceholderSize: true
        });


        $("#templateList").sortable("option", "connectWith", "ul.droptrue");
        $("#staticOptions").sortable("option", "connectWith", "#templateList");
        $("#qaOptions").sortable("option", "connectWith", "#templateList");
        $("#propertiesOptions").sortable("option", "connectWith", "#templateList")

        $("#staticOptions,#qaOptions,#templateList").sortable().disableSelection();
    });
</script>

</div> </div> <!-- /.contentfull -->
</asp:Content>

